<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			 body {
			  background-color: #fff;
			  font: 14px
			  color: #333;
			}
	         .father{
	         	justify-content: center;
	         	display: flex;
	         	height: 1226px;
	         	height: 614px;
	         	background-color: whitesmoke;
	         
	         	
	         }
	         .left{
	         	width: 234px;
	         	height: 614px;
	         	background-color: #fff;
	         	margin-right:10px ;
	         }
	         .right{
	         	width: 992px;
	         	height: 614px;
	         	background-color: #fff;;
	         	display: flex;
	           flex-direction: column;
	           justify-content: space-between;
	         }
	         .top{
	      
	         	width: 992px;
	         	height: 300px;
	         	display: flex;
	         	justify-content: space-between;
	         }
	          .bottom{
	         	width: 992px;
	         	height: 300px;
	         	display: flex;
	         	justify-content: space-between;
	         }
	
	
	         .item{
	         	width: 243px;
	         	/*height: 300px;*/
	         	height: 300px;
	         	background-color: #FFFFFF;
	        
	         }
		      li:hover{
			    z-index: 2;
			    -webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
			    box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
			    -webkit-transform: translate3d(0,-2px,0);
			    transform: translate3d(0,-2px,0);    	  
		      }
			li{
				list-style: none;
			}
			
			
			.title{
			
				position: relative;
				margin: -25px;
			  padding-top: 50px;
			  margin-left: -90px;
			  margin-top: -75px;
			  text-align: center;
			
			}
			
			
			.price{
				position: relative;
			  text-align: center;
			  color: #ff6700;
			}
			.desc{
			
			  height: 18px;
			  margin: 25px 20px 12px;
			  font-size: 12px;
			  text-overflow: ellipsis;
			  color: #b0b0b0;
			  overflow: hidden;
			  white-space: nowrap;
			  /*text-align: center;*/
			 text-align:center;
			}
			
			
			
			
			.footer{
			  min-width: 1226px;
			  height: 520px;
			  
			}
			
			.footer-service{
			  min-width: 1226px;
			  height: 80px;
			  padding: 27px 0;
			  border-bottom: 1px solid #e0e0e0;
			}
			
			.footer-service li{
			  float: left;
			  width: 19.8%;
			  height: 25px;
			  border-left: 1px solid #e0e0e0;
			  font-size: 16px;
			  line-height: 25px;
			  text-align: center;
			}
			
			.footer-service li em{
			  margin-right: 6px;
			  font-size: 24px;
			  line-height: 24px;
			  vertical-align: -4px;
			}
			
			.footer-service li:first-child{
			  border-left: 0;
			}
			
			
			.footer-links{
			  padding: 40px 0;
			}
			
			.footer-links .col-links{
			  float: left;
			  width: 160px;
			  height: 112px;
			  margin: 0;
			}
			
			.footer-links .col-links dt{
			  margin: -1px 0 26px;
			  font-size: 14px;
			  line-height: 1.25;
			  color: #424242;
			}
			
			.footer-links .col-links dd{
			  margin: 10px 0 0;
			  font-size: 12px;
			}
			
			.footer-links .col-contact{
			  float: right;
			  width: 251px;
			  height: 112px;
			  border-left: 1px solid #e0e0e0;
			  text-align: center;
			  color: #616161;
			}
			
			.footer-links .col-contact .phone{
			  margin: 0 0 5px;
			  font-size: 22px;
			  line-height: 1;
			  color: #ff6700;
			}
			
			.footer-links .col-contact p{
			  margin: 0 0 16px;
			  font-size: 12px;
			}
			
			.footer-links .col-contact a {
			  border: 1px solid #b0b0b0;
			  border-color: #ff6700;
			  background: #fff;
			  color: #ff6700;
			  width: 118px;
			  height: 28px;
			  font-size: 12px;
			  line-height: 28px;
			  padding: 0;
			  margin: 0;
			  display: inline-block;
			}		
			 a{
			  color:#B0B0B0 !important;
			  text-decoration: none;
			}
			
			a:hover{
			  color:#ff6700 !important;
			}
	</style>
	</head>
	<body>

		
     <div class="father">
	     	<div class="left">
	     		<img src="../img/tu11.jpg">
	     	</div>
	     	<div class="right">
	     		<div class="top">		     	  
				    <li>
				    	<div class="item"><img src="../img/tu1.jpg" height="235px" width="242px"/>
				     	    <h3 class="title">Xiaomi MIX4</h3>
		             	    <p class="desc">CPU全面屏超级好用</p>
		             	    <p class="price">
		                    <span>4999</span>元起
		                    <del> 6666元</del>
		                    </p>
		                </div>
				    </li>	
				    
				    <li>
				    	<div class="item"><img src="../img/tu2.jpg" height="235px" width="242px"/>	
					     	<h3 class="title">Note10 Pro</h3>
			                <p class="desc">天机1100年度旗舰芯</p>
			                <p class="price">
			                <span>1599</span>元起
			                <del> 6660元</del>
			                </p>	      	  
				     	</div>
				    </li>  
				    
				    <li>
				    	<div class="item"><img src="../img/page1-2.jpg" height="235px" width="242px"/>
					     	<h3 class="title">Note99 5G</h3>
			                <p class="desc">5G小金刚|旗舰长续航</p>
			                <p class="price">
			                <span>1399</span>元起
			                </p>		     	  
				     	</div>
				    </li>	
		 
				    <li>
				    	<div class="item"><img src="../img/page1-3.jpg" height="235px" width="242px"/>
				     	  	<h3 class="title">Xiaomi AK47</h3>
				              <p class="desc">高级处理器</p>
				              <p class="price">
				               <span>998</span>元起<del>
				              </p>		     	  
				     	</div>
				    </li>			     	
	     		</div> 		
	     	
		     	<div class="bottom">		
		     	  <li>
		     	  	<div class="item"><img src="../img/page1-4.jpg"  height="235px" width="242px"/>
		     	  		<h3 class="title">Xiaomi MAX5</h3>
		                <p class="desc">打游戏超级好</p>
		                <p class="price">
		                <span>9999</span>元起
		                </p>
		     	    </div>
		     	  </li>	
		     	  
		     	  <li>
		     	  	<div class="item"><img src="../img/page1-5.jpg"  height="235px" width="242px"/>
		     	  		<h3 class="title">Xiaomi857</h3>
			            <p class="desc">超长待机，十分快乐</p>
			            <p class="price">
			            <span>4999</span>元起<del>6666元</del>
			            </p>
		     	    </div>
		     	  </li>	
		     	  
		     	   <li>
		     	   	 <div class="item"><img src="../img/page2-2.webp" height="235px" width="242px"/>
		     	 	 	<h3 class="title">Xiaomi MIX99</h3>
			            <p class="desc">千万99999万四摄</p>
			            <p class="price">
			            <span>4999</span>元起<del>6666元</del>
			            </p>
		     	 	 </div>
		     	   </li>	
		     	   
		     	    <li>
		     	    	<div class="item"><img src="../img/page2-3.webp" height="235px" width="242px"/>
		     	 	 		<h3 class="title">Xiaomi99</h3>
				            <p class="desc">长长久久</p>
				            <p class="price">
				            <span>999</span>元起<del>6666元</del>
				            </p>
		     	 	    </div>
		     	    </li>	
		        </div> 
	     	</div>
     	</div>
     	
	  <div class="footer">
	      <div class="container">
	        <div class="footer-service clearfix">
	          <ul class="list-service clearfix">
	            <li><a href="javascript:;"><em class="iconfont-tool"></em>预约维修服务</a></li>
	            <li><a href="javascript:;"><em class="iconfont-circle7"></em>7天无理由退货</a></li>
	            <li><a href="javascript:;"><em class="iconfont-circle15"></em>15天免费换货</a></li>
	            <li><a href="javascript:;"><em class="iconfont-gift"></em>满150元包邮</a></li>
	            <li><a href="javascript:;"><em class="iconfont-location"></em>520余家售后网点</a></li>
	          </ul>
	        </div>
	        <div class="footer-links clearfix">
	          <dl class="col-links">
	            <dt>帮助中心</dt>
	            <dd><a href="javascropt:;">账户管理</a></dd>
	            <dd><a href="javascropt:;">购物指南</a></dd>
	            <dd><a href="javascropt:;">订单操作 </a></dd>
	          </dl>
	          <dl class="col-links">
	            <dt>服务支持</dt>
	            <dd><a href="javascropt:;">售后政策</a></dd>
	            <dd><a href="javascropt:;">自助服务</a></dd>
	            <dd><a href="javascropt:;">相关下载</a></dd>
	          </dl>
	          <dl class="col-links">
	            <dt>线下门店</dt>
	            <dd><a href="javascropt:;">小米之家</a></dd>
	            <dd><a href="javascropt:;">服务网点</a></dd>
	            <dd><a href="javascropt:;">授权体验店</a></dd>
	          </dl>
	          <dl class="col-links">
	            <dt>关于小米</dt>
	            <dd><a href="javascropt:;">了解小米</a></dd>
	            <dd><a href="javascropt:;">加入小米</a></dd>
	            <dd><a href="javascropt:;">投资者关系</a></dd>
	          </dl>
	          <dl class="col-links">
	            <dt>关注我们</dt>
	            <dd><a href="javascropt:;">新浪微博</a></dd>
	            <dd><a href="javascropt:;">官方微信</a></dd>
	            <dd><a href="javascropt:;">联系我们</a></dd>
	          </dl>
	          <dl class="col-links">
	            <dt>特色服务</dt>
	            <dd><a href="javascropt:;">F码通道</a></dd>
	            <dd><a href="javascropt:;">礼物码</a></dd>
	            <dd><a href="javascropt:;">防伪查询</a></dd>
	          </dl>
	          <div class="col-contact">
	            <p class="phone">400-100-5678</p>
	            <p>
	              "周一至周日 8:00-18:00"
	              <br>
	              "(仅收市话费)"
	            </p>
	            <a href="javascript:;"><em class="iconfont-message2"></em>人工客服</a>
	          </div>
	        </div>
	        <div class="site-info">
	          <div class="container">
	            <div class="logo"></div>
	            <div class="info-text">
	              <p class="sites">
	                <a href="javascript:;">小米商城</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">MIUI</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">米家</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">米聊</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">多看</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">游戏</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">路由器</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">米粉卡</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">政企服务</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">小米天猫店</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">小米集团隐私政策</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">小米公司儿童信息保护规则</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">小米商城隐私政策</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">小米商城用户协议</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">问题反馈</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">廉正举报</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">诚信合规</a>
	                <span class="sep1">|</span>
	                <a href="javascript:;">Select Location</a>
	              </p>
	
	            </div>
	          </div>
	        </div>
	      </div>
	  </div>


	</body>
</html>

